<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<uni-swipe-action ref="swipeAction">
					<view style="margin-top: 20rpx" @tap="gotoDetail(item)" v-for="(item, index) in swipeList" :key="item.id">
						<uni-swipe-action-item :right-options="item.options" @click="swipeClick($event, index)">
							<view class="show-items-item">
								<view class="show-items-item-left">
									<image class="show-items-item-image" mode="aspectFill" :src="item.picUrl"></image>
									<view class="show-items-item-image-bontton">
										<image src="../../static/images/time.png"></image>
										<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
									</view>
								</view>
								<view class="show-items-item-right">
									<view class="show-items-item-right-one">
										<view :class="[item.resourceType == '1' ? 'active' : '']">
											{{ item.resourceType == '1' ? '出售' : '采购' }}
										</view>
										<view style="font-weight: 600">{{ item.title }}</view>
									</view>
									<view class="show-items-item-right-two">
										{{ item.pubContent }}
									</view>
									<view class="show-items-item-right-four">
										<image src="../../static/images/location.png"></image>
										<view>{{ showLocation(item.province, item.city) }}</view>
										<view>￥{{ item.price ? item.price : '电议' }}</view>
									</view>
									<view class="show-items-item-right-five">
										<image :src="item.briefUserInfo.avatar"></image>
										<view>{{ item.briefUserInfo.nickName }}</view>
										<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
									</view>
									<view class="show-items-item-right-six">
										<view class="one b-btn">
											<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
											<view class="b-count">
												{{ item.viewCount == null ? 0 : item.viewCount }}
											</view>
										</view>
										<view @tap.stop="handleCollect(item, index)" class="two b-btn">
											<image v-if="item.collectFlag == '0'" class="b-img" src="../../static/images/collect.png"></image>
											<image v-else class="b-img" src="../../static/images/like1.png" />
											<view class="b-count">
												{{ item.collectCount == null ? 0 : item.collectCount }}
											</view>
										</view>
										<view class="three b-btn">
											<image class="b-img" src="../../static/images/message.png"></image>
											<view class="b-count">
												{{ item.commentCount == null ? 0 : item.commentCount }}
											</view>
										</view>
										<view class="four b-btn">
											<image class="b-img" src="../../static/images/zhaunfa.png"></image>
											<button class="share-btn" open-type="share" @tap.stop="handShareCountAdd(item, index)">
												分享
												{{ item.shareCount == null ? 0 : item.shareCount }}
											</button>
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</view>
					<view style="height: 20rpx"></view>
				</uni-swipe-action>
			</view>
			<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
				<u-loadmore icon :status="status" />
			</view>
		</view>
	</view>
</template>
<script>
import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
import locationFormatter from '@/util/locationFormatter';
const api = require('../../util/api.js');
export default {
	components: {
		CustomNavbarTwo
	},
	data() {
		return {
			pageTitle: '我的收藏',
			showSex: false,
			pageSize: 8,
			pageNum: 1,
			total: 0,
			status: 'loading',
			show: true,
			swipeList: [],
			shareTile: ''
		};
	},
	onPullDownRefresh() {
		// 下拉刷新的处理逻辑
		this.pageNum = 1;
		this.status = 'loading';
		this.swipeList = [];
		this.getData();
	},
	onReachBottom() {
		if (this.total == this.swipeList.length) {
			this.status = 'nomore';
			this.show = true;
			return;
		}
		this.show = true;
		this.pageNum++;
		this.getData();
	},
	onLoad() {
		this.getData();
		wx.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.shareTile, //分享的名称
			path: '/pages/favie/index',
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
			path: '/pages/favie/index',
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	methods: {
		showLocation(pro, city) {
			const displayName = locationFormatter.format(pro, city);
			return displayName;
			console.log(displayName); // 输出：浙江杭州
		},
		//增加分享次数
		handShareCountAdd(item, index) {
			this.shareTile = item.title;
			this.$https
				.post(this.$api.getPubShareCountAdd, {
					id: item.id
				})
				.then((res) => {
					if (res.code === 200) {
						this.swipeList[index].shareCount = this.swipeList[index].shareCount + 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		gotoDetail(item) {
			uni.navigateTo({
				url: `/page/detail/index?id=${item.id}&title=${item.title}`
			});
		},
		//点赞
		handleCollect(item, index) {
			console.log(item, 55);
			this.$https
				.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				})
				.then((res) => {
					if (res.code === 200) {
						if (item.collectFlag == 0) {
							this.swipeList[index].collectFlag = '1';
							this.swipeList[index].collectCount++;
						} else {
							this.swipeList[index].collectFlag = '0';
							this.swipeList[index].collectCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		getData() {
			const query = {
				pageSize: this.pageSize,
				pageNum: this.pageNum
			};
			this.$https.post(this.$api.myCollectPubInfoPage, query).then((res) => {
				if (res.code === 200) {
					if (this.pageNum == 1) {
						this.swipeList = [];
					}
					const data = res.data;
					this.total = res.total;
					if (this.total == 0) {
						this.status = 'nomore';
						this.show = true;
					} else {
						data.forEach((item) => {
							this.$set(item, 'options', [
								{
									text: '删除',
									style: {
										backgroundColor: '#F56C6C',
										height: '322rpx'
									}
								}
							]); // 使用Vue的$set方法确保响应式
						});
						this.swipeList = [...this.swipeList, ...data];
						this.pageTitle = '我的收藏（' + res.total + ')';
						this.show = false;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.show = false;
				}
			});
		},
		swipeClick(e, index) {
			let { content } = e;
			if (content.text === '删除') {
				uni.showModal({
					content: '是否取消收藏',
					success: (res) => {
						if (res.confirm) {
							this.shouchang(index);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		shouchang(index) {
			const data = {
				operateType: '1',
				processType: '0',
				pubInfoId: this.swipeList[index].id
			};
			this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
				if (res.code === 200) {
					this.pageNum = 1;
					this.getData();
					uni.showToast({
						title: '取消收藏成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.share-btn {
	font-size: 20rpx;
	width: 100rpx;
	line-height: 37rpx;
}

.my_container {
	width: 100%;

	.my_container_body {
		width: 750rpx;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		min-height: 1624rpx;

		.my_container_body_head {
			width: 686rpx;
			height: 176rpx;
		}

		.my_container_body_body {
			width: 686rpx;
			margin-left: 32rpx;
			display: flex;

			.show-items-item {
				width: 686rpx;
				height: 322rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 20rpx;
				display: flex;

				.show-items-item-left {
					.show-items-item-image {
						width: 212rpx;
						height: 224rpx;
						margin-top: 28rpx;
						margin-left: 20rpx;
						border-radius: 24rpx;
					}

					.show-items-item-image-bontton {
						height: 70rpx;
						width: 212rpx;
						margin-left: 20rpx;
						display: flex;
						margin-top: 20rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						view {
							width: 128rpx;
							height: 36rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							margin-left: 4rpx;
						}
					}
				}

				.show-items-item-right {
					margin-left: 20rpx;
					height: 322rpx;

					.show-items-item-right-one {
						display: flex;
						align-items: center;

						:nth-child(1) {
							width: 72rpx;
							height: 40rpx;
							line-height: 40rpx;
							background-color: #556983;
							border-radius: 10rpx;
							margin-top: 38rpx;
							margin-right: 10rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 18rpx;
							color: #fff;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}

						.active {
							width: 72rpx;
							height: 40rpx;
							line-height: 40rpx;
							background-color: #4fe200;
							border-radius: 10rpx;
							margin-top: 38rpx;
							margin-right: 10rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 18rpx;
							color: #fff;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}

						:nth-child(2) {
							margin-top: 38rpx;
							width: 340rpx;
							height: 40rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 39rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}
					}

					.show-items-item-right-two {
						width: 414rpx;
						height: 68rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 10rpx;
						overflow: hidden;
						/* 确保超出部分的文本会被隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						display: -webkit-box;
						/* 使用弹性盒子模型 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列子元素 */
					}

					.show-items-item-right-four {
						display: flex;
						width: 414rpx;
						height: 44rpx;

						image {
							width: 24rpx;
							height: 26rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							margin-top: 9rpx;
						}

						:nth-child(2) {
							flex: 1;
							height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #333;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding-left: 4rpx;
						}

						:nth-child(3) {
							width: 180rpx;
							height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 600;
							font-size: 24rpx;
							color: #ff4400;
							line-height: 44rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.show-items-item-right-five {
						display: flex;
						width: 414rpx;
						height: 44rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-top: 2rpx;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							border: 1rpx solid #e4e8ef;
						}

						:nth-child(2) {
							width: 220rpx;
							line-height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #333;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding-left: 10rpx;
						}

						:nth-child(3) {
							width: 154rpx;
							line-height: 44rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 20rpx;
							color: #ff4400;
							line-height: 44rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.show-items-item-right-six {
						padding-left: 10rpx;
						height: 40rpx;
						width: 414rpx;
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						line-height: 40rpx;

						.b-btn {
							display: flex;

							.b-img {
								width: 40rpx;
								height: 40rpx;
							}

							.b-count {
								margin-left: 4rpx;
								font-size: 24rpx;
							}
						}

						.four {
							width: 130rpx;
							position: relative;

							.b-img {
								width: 36rpx;
								height: 36rpx;
							}

							.share-btn {
								width: 120rpx;
								background-color: transparent;
								padding-left: 36rpx;
								position: absolute;
								font-size: 22rpx;
								line-height: 37rpx;
								top: 0;
							}
						}
					}
				}
			}
		}
	}
}
</style>
